<template>
  <div>
    <div class="header">
    </div>
    <div class="menu">
      <div class="menu-container">
        <admin-menu menuName="/admin/news"></admin-menu>
      </div>
      <div class="content">
          <el-table
            :data="form"
            style="width: 100%">
            <el-table-column
              prop="title"
              label="文章标题"
              width="180">
            </el-table-column>
            <el-table-column
              prop="create_time"
              label="发布时间">
            </el-table-column>
            <el-table-column
              prop="project_name"
              label="所属专题">
            </el-table-column>
             <el-table-column
              prop="subtitle"
              label="副标题">
            </el-table-column>
            <el-table-column
              prop="type"
              label="文章标签">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                <el-button type="text" size="small" @click="editNews(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import adminMenu from '../../components/admin/menu'
import myArticle from '../../components/admin/article'

export default {
  data () {
    return {
      form: [],
      project:[]
    }
  },
  methods: {
    handleDelete (obj) {
      this.$store.dispatch('deletNews', {
        data: {
          id: obj.id
        },
        cb: (res) => {
          if (res.data.code === 20000) {
            this.$message.success('删除成功')
            this.getNews()
          }
        }
      })
    },
    getNews () {
      this.$store.dispatch('getNews', {
        data: {
          page: 1,
          pageSize: 10
        },
        cb: (res) => {
          if (res.data.code === 20000) {
            this.form = res.data.data
            for (let i=0; i<this.form.length; i++) {
              for (let j=0; j<this.project.length; j++) {
                if(this.form[i].project_id === this.project[j].id) {
                  this.form[i].project_name = this.project[j].name
                }
              }
            }
          }
        }
      })
    },
    editNews (obj) {
      this.$router.push(
        {
          path: '/admin',
          query: {
            id: obj.id
          }
        }
      )
    },
    getProject () {
      this.$store.dispatch('getProject', {
        data: '',
        cb:(res)=> {
          if(res.data.code === 20000) {
            this.project = res.data.data
            console.log('this.form', this.form)
          } else {
            this.$message.error(res.data.msg)
          }
        }
      })
    }
  },
  components: {
    adminMenu,
    myArticle
  },
  async mounted () {
    await this.getProject()
    this.getNews()
  }
}
</script>
<style lang="stylus" scoped>
  .header
    background-color #4d535b
    height 40px
    width 100%
  .menu
    display flex
    .menu-container
      flex-basis 200px
    .content
      flex-grow 2
      background-color #fff
      padding 40px
</style>
